<template>
    <div class="docker" >
<div class="docker_one " :class="{'common':index===1}">
    <img src="../assets/shouye.png" alt="">
    <p @click="goIndex">首页</p>
</div>
<div class="docker_two " :class="{'common':index===2}">
    <img src="../assets/gouwuche.png" alt="">
    <p @click="goShopcart">购物车</p>
</div>
<div class="docker_three "  :class="{'common':index===3}">
    <img src="../assets/dingdan.png" alt="">
    <p @click="goOrder">订单</p>
</div>
<div class="docker_four " :class="{'common':index===4}">
    <img src="../assets/31wode.png" alt="">
    <p @click="goMy">我的</p>
</div>
 
    </div>
   
</template>

<script setup> 
import { RouterLink } from "vue-router";

import {defineProps} from 'vue'

import { useRouter } from "vue-router";
import { useStore } from "vuex";
let store = useStore();

defineProps({
    index:Number
})


let router = useRouter();
const handler=(id)=>{
router.push('/detail')
}
const goIndex = ()=>{
  router.push('/index')
}
const goShopcart = ()=>{
  router.push('/shopcart')
}
const goOrder = ()=>{
  router.push('/order')
}
let goMy = () => {
  store.commit("changeRouterType", "push");
  router.push("/my");
};
</script>

<style lang="scss" scoped>
.docker{
    z-index: 999;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 0.49rem;
   
}
.common {
    color:aqua;
}
img{
    padding-left:0.15rem;
    margin-top:0.07rem;
    display:block;
    width: 0.2rem;
    height: 0.2rem;
}
p{
    text-align: center;
    margin-top:0.04rem;
    width: 0.5rem;
    height: 0.14rem;
    font-size:0.12rem;
}
</style>